class HistoryBook extends Book {
    constructor() {
        super();
    }

    loadBook(bookContainerId, bookConfig) {
        Select(bookContainerId)[0].innerHTML = '<div id ="book-thumbs"></div><div id="book-pages"></div>';
        this.bookThumbContainer = Select("#book-thumbs");
        this.pageContainer = Select("#book-pages");

        this.loadThumbs(bookConfig);
        this.loadCatalog(bookConfig.catalog);

        var that = this;
        bookConfig.pages.forEach((pageConfig, index) => {
            var page = this.pageFactory.newPage(that, pageConfig);
            this.addPage(page, index);
        });
    }

    loadThumbs(bookConfig) {
        var that = this;
        bookConfig.thumbs.forEach((thumb, index) => {
            var thumbDiv = document.createElement("div");
            this.bookThumbContainer.appendChild(thumbDiv);
            if (thumb.description != undefined && thumb.description.trim() != '') {
                thumbDiv.innerHTML = thumb.description;
            } else {
                thumbDiv.innerHTML = bookConfig.pages[index].description;
                thumbDiv.firstChild.classList.add("book-thumbs-scale");
            }
            thumbDiv.classList.add("book-thumbs-item");
            if (index == 0) {
                thumbDiv.classList.add("book-thumbs-active");
            }
            thumbDiv.dataset.index = index;
            thumbDiv.addEventListener("click", function (event) {
                if (that.currentPage == event.currentTarget.dataset.index) {
                    //控制页面显示或者隐藏
                    var bookPages = Select("#book-pages");
                    if (bookPages.classList.contains("book-pages-hide")) {
                        bookPages.classList.remove("book-pages-hide");
                        Select(".book-container")[0].classList.remove("book-container-min");
                    } else {
                        bookPages.classList.add("book-pages-hide");
                        Select(".book-container")[0].classList.add("book-container-min");
                    }
                } else {
                    //显示页面
                    Select("#book-pages").classList.remove("book-pages-hide");
                    Select(".book-container")[0].classList.remove("book-container-min");
                    //切换页面
                    that.gotoPage(event.currentTarget.dataset.index);
                }
            });
        });
    }


    loadCatalog(catalogConfig) {
        this.currentChapter = Select("#catalog-current");
        var dropdownMenu = Select("#catalog-dropdown-menu");
        var historyBook = this;
        catalogConfig.forEach((chapter, index) => {
            var chapterTitle = document.createElement("a");
            chapterTitle.textContent = chapter.title;
            chapterTitle.dataset.page = chapter.pageNum;
            chapterTitle.classList.add("dropdown-item");
            chapterTitle.classList.add("dropdown-item-chapter");
            chapterTitle.onclick = function () {
                // that.currentChapter.textContent = this.innerText;
                historyBook.gotoPage(this.dataset.page);
            };
            dropdownMenu.appendChild(chapterTitle);

            if (chapter.children) {
                chapter.children.forEach(child => {
                    var childChapterTitle = document.createElement("a");
                    childChapterTitle.textContent = child.title;
                    childChapterTitle.dataset.page = child.pageNum;
                    childChapterTitle.classList.add("dropdown-item");
                    childChapterTitle.classList.add("dropdown-item-chapter-child");
                    childChapterTitle.onclick = function () {
                        // that.currentChapter.textContent = this.innerText;
                        historyBook.gotoPage(this.dataset.page);
                    };
                    dropdownMenu.appendChild(childChapterTitle);
                });
            }

            if (index < catalogConfig.length - 1) {
                var divider = document.createElement("div");
                divider.classList.add("dropdown-divider");
                dropdownMenu.appendChild(divider);
            }
        });
    }

    gotoPage(page) {
        if (this.currentPage != page) {
            this.previousPage = this.currentPage;
            this.currentPage = page;

            var pages = Select(".book-pages-item");
            for (var i = 0; i < pages.length; i++) {
                if (pages[i].dataset.pageNum == this.previousPage) {
                    pages[i].classList.remove("book-pages-active");
                }
                if (pages[i].dataset.pageNum == this.currentPage) {
                    pages[i].classList.add("book-pages-active");
                }
            }

            this.pages[this.previousPage].setActived(false);
            this.pages[this.currentPage].setActived(true);

            var previousThumb = Select(".book-thumbs-item")[this.previousPage];
            //切换样式
            previousThumb.classList.remove("book-thumbs-active");

            var thumbDiv = Select(".book-thumbs-item")[this.currentPage];
            thumbDiv.classList.add("book-thumbs-active");

            //执行回调函数
            if (this.onPageChanged) {
                this.onPageChanged(this.currentPage, this.previousPage);
            }
        }
    }
}